<template>
  <view v-if="resultList != null">
    <StatusBar></StatusBar>
    <view class="title">
      {{ city }}
    </view>
    <view class="" v-for="item in postLists">
      <post
        :city="city.value"
        :detailLocation="item.detailLocation"
        :username="item.username"
        :userAvatar="item.userAvatar"
        :pictureUrl="item.pictureUrl"
        :likesNum="item.likesNum"
      ></post>
    </view>
    <!-- <post :detailLocation="detailLocation" :username="username" :userAvatar="userAvatar" :pictureUrl="pictureUrl" :likesNum="likesNum"></post> -->
  </view>

  <view class="loading_box" v-if="resultList == null">
    <image src="../../static/loadingPlane.svg" class="loading"></image>
    <view style="font-size: 20px; font-weight: bold"> 飞行中...... </view>
  </view>
  <view
    v-if="postLists.length == 0"
    style="
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      margin-top: 200rpx;
    "
  >
    飞入无人之境
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import post from '@/components/post/post.vue';
import { onLoad } from '@dcloudio/uni-app';
import { getPassageByAddress } from '../../service/api/test.js';
import { request } from '../../service/request.js';
// 待传递的值
const Showlocation = ref();
const location = ref();
const username = ref('xiaoming');
const detailLocation = ref('南京大学');
const userAvatar = ref('../../static/test2.png');
const pictureUrl = ref('../../static/test1.png');
const likesNum = ref(12);
const result = ref();
const postLists = reactive([]);

const regx = /^(.*?[省市自治区])(.*?[市区县])(.*)$/;
const locationResult = ref();
const province = ref();
const city = ref();
const resultList = ref();

onLoad(async (option) => {
  // console.log(newsList.value);
  console.log(option.location);

  //发送请求
  let res = await request({
    url: '/passage/getPassageByAddress',
    method: 'POST',
    data: {
      address: option.location,
    },
  });

  console.log(res);
  if (res.code == 403) {
    resultList.value = res;
    console.log(location.value);

    const provinceReg = /([\u4e00-\u9fa5]+省)/;
    const provinceMatch = location.value.match(provinceReg);
    province.value = provinceMatch ? provinceMatch[0] : '';

    // 匹配城市名称，例如"武汉市"
    const cityReg = /([\u4e00-\u9fa5]+市)/;
    const cityMatch = location.value.match(cityReg);
    city.value = cityMatch ? cityMatch[0] : '';
    return;
  }
  location.value = res.data[0].address;

  console.log(location.value);
  const provinceReg = /([\u4e00-\u9fa5]+省)/;
  const provinceMatch = location.value.match(provinceReg);
  province.value = provinceMatch ? provinceMatch[0] : '';

  // 匹配城市名称，例如"武汉市"
  const cityReg = /([\u4e00-\u9fa5]+市)/;
  const cityMatch = location.value.match(cityReg);
  city.value = cityMatch ? cityMatch[0] : '';

  resultList.value = res;

  res.data.forEach((item) => {
    if (item.image != null) {
      postLists.push({
        pictureUrl: item.image,
        detailLocation: item.address,
      });
    }
  });
  //根据postId查找显示当前
  console.log(postLists);
});
</script>

<style>
.title {
  font-size: 50rpx;
  font-weight: bold;
  margin: 35rpx;
}

.loading {
  width: 200rpx;
  height: 200rpx;
}

.loading_box {
  margin-top: 260rpx;
  margin-left: 35%;
  position: absolute;
  animation: moveUpDown 2s ease-in-out infinite;
  display: flex;
  flex-direction: column;
}

@keyframes moveUpDown {
  /* 定义名为 moveUpDown 的动画 */
  0% {
    top: 260rpx;
    /* 初始位置为 0，即不动 */
  }

  50% {
    top: 330rpx;
    /* 位移 100px，向下 */
  }

  100% {
    top: 260rpx;
    /* 回到原点，向上 */
  }
}
</style>
